<template>
  <div class="djpay">
    <div class="title">
      <p>付费精品</p>
      <span @click="toDjPayList">更多></span>
    </div>
    <div class="list">
      <div class="li" v-for="(item, index) in list" :key="index" @click="toPayDetail(item.id)">
        <div class="img">
          <img :src="item.picUrl" />
          <span class="time"> {{ times[index] | showDate }}更新</span>
        </div>
        <div class="right">
          <span class="name">{{ item.name }}</span>
          <span class="rcmdtext">{{ item.rcmdText }}</span>
          <span class="lastProgramName">{{ item.lastProgramName }}</span>
          <span class="price">￥{{ item.originalPrice / 100 }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDjPaygiftList, getDjDetail } from '../../../network/dj.js'
import { formatTime } from '../../common/util.js'
export default {
  data () {
    return {
      limit: 4,
      list: [],
      ids: [],
      times: []
    }
  },
  methods: {
    toDjPayList () {
      this.$router.push('/paylist')
    },
    toPayDetail (id) {
      this.$router.push('/pay_detail/' + id)
    },
    getDjPaygiftList (limit) {
      getDjPaygiftList(limit).then(res => {
        // console.log(res.data)
        this.list = res.data.data.list
        this.list.forEach(item => {
          this.ids.push(item.id)
        })
        // console.log(this.ids)
        this.getDjDetail()
      })
    },
    getDjDetail () {
      this.ids.forEach(item => {
        getDjDetail(item).then(res => {
          this.times.push(res.data.djRadio.lastProgramCreateTime)
          // console.log(res.data)
        })
      })
      // console.log(this.times)
    }
  },
  filters: {
    showDate (value) {
      const date = new Date(value)
      return formatTime(date, 'yyyy年MM月dd日')
    }
  },
  created () {
    this.getDjPaygiftList(this.limit)
  }
}
</script>

<style lang="less" scoped>
  .djpay {
    width: 95%;
    margin: 20px auto;
    .title {
      padding-bottom: 10px;
      border-bottom: 1px solid #e1e1e2;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      p {
        font-size: 20px;
      }
    }
    .list {
      width: 100%;
      margin: 0 auto 20px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      .li {
        width: 48%;
        padding: 10px 0;
        border-bottom: 1px solid #efefef;
        display: flex;
        justify-content: flex-start;
        cursor: pointer;
        .img {
          position: relative;
          width: 25%;
          img {
            width: 100%;
          }
          .time {
            position: absolute;
            width: 100%;
            bottom: 5px;
            left: 0;
            font-size: 14px;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.7));
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .right {
          width: 70%;
          padding-left: 10px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          span {
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .name {
            font-size: 17px;
            padding: 5px 0;
          }
          .rcmdtext, .lastProgramName {
            color: #999999;
            font-size: 15px;
            padding: 5px 0;
          }
          .price {
            color: #44aaf8;
            font-size: 17px;
            padding-top: 5px;
          }
        }
      }
    }
  }
</style>
